<template>
  <div class="container">
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.page.temporary')+$t('m.code')">
            <el-input maxlength="20" show-word-limit v-model="formInline.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.state')">
            <el-select @change="selectState" v-model="formInline.state" :placeholder="$t('m.choose')">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button type="primary" @click="increase" v-if="hasPermission('add')">{{$t('m.add')}}</el-button>
          <el-button type="primary" @click="editState" v-if="hasPermission('editState')">{{$t('m.editState')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table
          class="table-wrap"
          ref="table"
          stripe
          empty-text
          fits
          v-loading="tableLoading"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleMultiSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="tsareacode" :label="$t('m.page.temporary')+$t('m.code')" width="100"></el-table-column>
          <el-table-column align="center" prop="tsareaname" :label="$t('m.page.temporary')+$t('m.name')" width="120"></el-table-column>
          <el-table-column :label="$t('m.state')" width="100" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.state==0">{{$t('m.stopped')}}</span>
              <span v-if="scope.row.state==1">{{$t('m.started')}}</span>
              <span v-if="scope.row.state==2">{{$t('m.occupied')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="type" :label="$t('m.page.temporary')+$t('m.type')">
            <template slot-scope="scope">
              <span v-if="scope.row.type==1">{{$t('m.intemporary')}}</span>
              <span v-if="scope.row.type==2">{{$t('m.outtemporary')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="warehousename" :label="$t('m.page.warehouse')+$t('m.name')"></el-table-column>
          <el-table-column align="center" prop="creator" :label="$t('m.creator')"></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
          <el-table-column align="center" prop="modifier" :label="$t('m.modifier')"></el-table-column>
          <el-table-column align="center" prop="modifydate" :label="$t('m.modifydate')"></el-table-column>

          <el-table-column :label="$t('m.operation')" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="open(scope.row)" size="mini" v-if="hasPermission('table-edit')">{{$t('m.edit')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
      </el-col>
    </el-row>

    <!-- 暂存区编辑 dialog 开始 -->
    <el-dialog @close="closeDialog" width="600px" :title="$t('m.edit')+$t('m.page.temporary')" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :rules="ruleFormEdit" ref="ruleFormEdit" size="mini" :model="form">
        <el-form-item :label="$t('m.page.warehouse')+$t('m.name')" :label-width="formLabelWidth" prop="warehousename" align="left">
          <el-select @change="selectWarehouse" v-model="form.warehousename">
            <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.temporary')+$t('m.type')" :label-width="formLabelWidth" prop="type" align="left">
          <el-select @change="setType" v-model="type">
            <el-option v-for="item in temporarytype" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.usetruck')" :label-width="formLabelWidth" prop="enabletruck" align="left">
          <el-radio-group v-model="form.enabletruck">
            <el-radio :label="1">{{$t('m.yes')}}</el-radio>
            <el-radio :label="0">{{$t('m.no')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('m.state')" :label-width="formLabelWidth" align="left">
          <el-select @change="setState" v-model="stateValue">
            <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.temporary')+$t('m.name')" :label-width="formLabelWidth" prop="tsareaname">
          <el-input maxlength="20" show-word-limit size="mini" v-model="form.tsareaname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.page.temporary')+$t('m.code')" :label-width="formLabelWidth" prop="tsareacode">
          <el-input maxlength="10" show-word-limit size="mini" v-model="form.tsareacode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="length" :label="$t('m.length')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input maxlength="7" show-word-limit @change="getSize" size="mini" v-model="form.length" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m</el-col>
        </el-form-item>

        <el-form-item prop="width" :label="$t('m.width')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input maxlength="7" show-word-limit @change="getSize" size="mini" v-model="form.width" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m</el-col>
        </el-form-item>
        <el-form-item prop="height" :label="$t('m.height')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input maxlength="7" show-word-limit @change="getSize" size="mini" v-model="form.height" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.size')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <span>{{size}}</span>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m³</el-col>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="editCancel">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="change()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 暂存区编辑 dialog 结束 -->

    <!-- 暂存区新增 dialog 开始 -->
    <el-dialog :close-on-click-modal="false" @close="closeAddDialog" width="600px" :title="$t('m.add')+$t('m.page.temporary')" :visible.sync="dialogFormVisible1">
      <el-form :rules="ruleFormAdd" ref="ruleFormAdd" size="mini" :model="increaseForm">
        <el-form-item :label="$t('m.page.warehouse')+$t('m.name')" :label-width="formLabelWidth" prop="warehouseid" align="left">
          <el-select disabled @change="selectWarehouse" v-model="increaseForm.warehouseid" :placeholder="$t('m.choose')">
            <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.temporary')+$t('m.type')" :label-width="formLabelWidth" prop="type" align="left">
          <el-select v-model="increaseForm.type" :placeholder="$t('m.choose')">
            <el-option v-for="item in temporarytype" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.usetruck')" :label-width="formLabelWidth" prop="enabletruck" align="left">
          <el-radio-group v-model="increaseForm.enabletruck">
            <el-radio :label="1">{{$t('m.yes')}}</el-radio>
            <el-radio :label="0">{{$t('m.no')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('m.state')" :label-width="formLabelWidth" prop="state" align="left">
          <el-select v-model="increaseForm.state" :placeholder="$t('m.choose')">
            <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.temporary')+$t('m.name')" :label-width="formLabelWidth" prop="tsareaname">
          <el-input maxlength="20" show-word-limit size="mini" v-model="increaseForm.tsareaname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.page.temporary')+$t('m.code')" :label-width="formLabelWidth" prop="tsareacode">
          <el-input maxlength="10" show-word-limit size="mini" v-model="increaseForm.tsareacode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="length" :label="$t('m.length')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input
              maxlength="7"
              show-word-limit
              @change="getSize2"
              size="mini"
              v-model="increaseForm.length"
              autocomplete="off"
            ></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m</el-col>
        </el-form-item>

        <el-form-item prop="width" :label="$t('m.width')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input
              maxlength="7"
              show-word-limit
              @change="getSize2"
              size="mini"
              v-model="increaseForm.width"
              autocomplete="off"
            ></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m</el-col>
        </el-form-item>
        <el-form-item prop="height" :label="$t('m.height')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input
              maxlength="7"
              show-word-limit
              @change="getSize2"
              size="mini"
              v-model="increaseForm.height"
              autocomplete="off"
            ></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.size')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <span>{{size}}</span>
          </el-col>
          <el-col :span="2" style="padding-left:10px">m³</el-col>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="dialogFormVisible1 = false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="handIncrease()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 暂存区新增 dialog 结束 -->
    <!-- 批量修改状态开始 -->
    <el-dialog width="600px" :title="$t('m.edit')+$t('m.page.temporary')+$t('m.state')" :visible.sync="dialogFormVisible2" @close="stateValue = ''">
      <el-select size="mini" @change="setState" v-model="stateValue" :placeholder="$t('m.choose')">
        <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <div class="btns">
        <el-button size="mini" @click="dialogFormVisible2 = false;stateValue = ''">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="handleState()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改状态结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'

export default {
  name:'temporary',

  data(){
    return {
      state:[
        {
          value:'0',
          label:this.$t('m.stop')
        },
        {
          value:'1',
          label:this.$t('m.start')
        },
        {
          value:'2',
          label:this.$t('m.occupy')
        }
      ],
      temporarytype:[
        {
          value:'1',
          label:this.$t('m.intemporary')
        },
        {
          value:'2',
          label:this.$t('m.outtemporary')
        }
      ],
      status_loading:false,
      formInline:{
        code:'',
        state:''
      },
      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      ruleFormAdd:{
        enabletruck:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.usetruck'),
            trigger:'change'
          }
        ],
        warehouseid:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.page.warehouse'),
            trigger:'change'
          }
        ],
        type:[
          {
            required:true,
            message:this.$t('m.choose') +
              this.$t('m.page.temporary') +
              this.$t('m.type'),
            trigger:'change'
          }
        ],
        temporaryname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        state:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.state'),
            trigger:'change'
          }
        ],
        tsareacode:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.code'),
            trigger:'blur'
          }
        ],
        tsareaname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        width:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.width'),
            trigger:'blur'
          }
        ],
        height:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.height'),
            trigger:'blur'
          }
        ],
        length:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.length'),
            trigger:'blur'
          }
        ]
      },
      ruleFormEdit:{
        enabletruck:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.usetruck'),
            trigger:'change'
          }
        ],
        warehousename:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.page.warehouse'),
            trigger:'change'
          }
        ],
        type:[
          {
            required:true,
            message:this.$t('m.choose') +
              this.$t('m.page.temporary') +
              this.$t('m.type'),
            trigger:'change'
          }
        ],
        temporaryname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        state:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.state'),
            trigger:'change'
          }
        ],
        tsareacode:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.code'),
            trigger:'blur'
          }
        ],
        tsareaname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        width:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.width'),
            trigger:'blur'
          }
        ],
        height:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.height'),
            trigger:'blur'
          }
        ],
        length:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.length'),
            trigger:'blur'
          }
        ]
      },
      warehouse:[],
      form:{
        height:null,
        length:null,
        enabletruck:1,
        state:'1',
        tsareacode:'',
        tsareaid:null,
        tsareaname:'',
        type:null,
        warehouseid:null,
        warehousename:'',
        width:null
      },
      increaseForm:{
        height:null,
        length:null,
        enabletruck:1,
        state:'1',
        tsareacode:'',
        tsareaname:'',
        type:null,
        warehouseid:null,
        warehousename:'',
        width:null
      },
      formLabelWidth:'120px',
      options:[
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:'0',
          label:this.$t('m.stopped')
        },
        {
          value:'1',
          label:this.$t('m.started')
        },
        {
          value:'2',
          label:this.$t('m.occupied')
        }
      ],
      size:0, //体积,
      type:'', //暂存区类型
      stateValue:'' //状态
    }
  },
  computed:{
    name(){
      return this.formInline.code
    }
  },
  watch:{
    '$i18n.locale'(){
      this.$nextTick(() => {
        this.$refs.ruleFormAdd.clearValidate()
      })
      this.$nextTick(() => {
        this.$refs.ruleFormEdit.clearValidate()
      })
      this.state = [
        {
          value:'0',
          label:this.$t('m.stop')
        },
        {
          value:'1',
          label:this.$t('m.start')
        },
        {
          value:'2',
          label:this.$t('m.occupy')
        }
      ]
      this.temporarytype = [
        {
          value:'1',
          label:this.$t('m.intemporary')
        },
        {
          value:'2',
          label:this.$t('m.outtemporary')
        }
      ]
      this.ruleFormAdd = {
        enabletruck:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.usetruck'),
            trigger:'change'
          }
        ],
        warehousename:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.page.warehouse'),
            trigger:'change'
          }
        ],
        type:[
          {
            required:true,
            message:this.$t('m.choose') +
              this.$t('m.page.temporary') +
              this.$t('m.type'),
            trigger:'change'
          }
        ],
        temporaryname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        state:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.state'),
            trigger:'change'
          }
        ],
        tsareacode:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.code'),
            trigger:'blur'
          }
        ],
        tsareaname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        width:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.width'),
            trigger:'blur'
          }
        ],
        height:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.height'),
            trigger:'blur'
          }
        ],
        length:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.length'),
            trigger:'blur'
          }
        ]
      }
      this.ruleFormEdit = {
        enabletruck:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.usetruck'),
            trigger:'change'
          }
        ],
        warehousename:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.page.warehouse'),
            trigger:'change'
          }
        ],
        type:[
          {
            required:true,
            message:this.$t('m.choose') +
              this.$t('m.page.temporary') +
              this.$t('m.type'),
            trigger:'change'
          }
        ],
        temporaryname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        state:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.state'),
            trigger:'change'
          }
        ],
        tsareacode:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.code'),
            trigger:'blur'
          }
        ],
        tsareaname:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.page.temporary') +
              this.$t('m.name'),
            trigger:'blur'
          }
        ],
        width:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.width'),
            trigger:'blur'
          }
        ],
        height:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.height'),
            trigger:'blur'
          }
        ],
        length:[
          {
            required:true,
            message:this.$t('m.enter') +
              this.$t('m.length'),
            trigger:'blur'
          }
        ]
      }
      this.options = [
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:'0',
          label:this.$t('m.stopped')
        },
        {
          value:'1',
          label:this.$t('m.started')
        },
        {
          value:'2',
          label:this.$t('m.occupied')
        }
      ]
    },
    // replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')保留两位小数
    // replace('.', '$#$')只可以输入一个小数点从第二位开始
    'increaseForm.height'(newVal){
      if (newVal){
        this.increaseForm.height = newVal.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
      }
    },
    'increaseForm.width'(newVal){
      if (newVal){
        this.increaseForm.width = newVal.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
      }
    },
    'increaseForm.length'(newVal){
      if (newVal){
        this.increaseForm.length = newVal.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
      }
    },
    'form.height'(newVal){
      if (newVal){
        this.form.height = newVal.toString().replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
      }
    },
    'form.width'(newVal){
      if (newVal){
        this.form.width = newVal.toString().replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
      }
    },
    'form.length'(newVal){
      if (newVal){
        this.form.length = newVal.toString().replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
      }
    }
  },
  methods:{
    prevent(e){
      e.preventDefault ? e.preventDefault() : e.returnValue = false
    },

    search(){
      this.page = 1
      this.init()
    },
    handleClick(row){
      const $table = this.$refs.table

      $table.toggleRowExpansion(row)
      $table.toggleRowSelection(row)
    },
    init(){
      let code = this.formInline.code
      let selectState = this.formInline.state
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/tsarea/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          tsareacode:code,
          state:selectState
        }
      })
        .then(({ data }) => {
          for (let i = 0;i < data.records.length;i++){
            data.records[i].createdate = common.timestampToTime(data.records[i].createdate)
            data.records[i].modifydate = common.timestampToTime(data.records[i].modifydate)
          }

          this.tableData = data.records
          this.totalRows = data.total
          setTimeout(()=>this.tableLoading=false,500)
        })
    },
    setState(id){
      this.form.state = null
      this.form.state = id
    },
    open(row){
      if (row.height && row.width && row.length){
        this.size = (row.height * row.width * row.length).toFixed(2)
      }
      this.$axios({
        method:'get',
        url:`/tsarea/${row.tsareaid}`
      })
        .then(({ data }) => {
          this.form = data
          this.dialogFormVisible = true
        })
      if (row.type == 1){
        this.type = this.$t('m.intemporary')
      }
      if (row.type == 2){
        this.type = this.$t('m.outtemporary')
      }

      if (row.state == '1'){
        this.stateValue = this.$t('m.start')
      }
      if (row.state == '0'){
        this.stateValue = this.$t('m.stop')
      }
      if (row.state == '2'){
        this.stateValue = this.$t('m.occupy')
      }
    },
    change(){
      this.$refs['ruleFormEdit'].validate(valid => {
        if (valid){
          let that = this
          that
            .$axios({
              method:'put',
              url:'/tsarea/update',
              data:{ ...this.form }
            })
            .then(() => {
              that.$message({
                showClose:true,
                message:that.$t('m.editSuccess'),
                type:'success',
                duration:1000
              })
              that.page = 1
              that.dialogFormVisible = false
              that.init()
            })
        }
      })
    },
    increase(){
      this.dialogFormVisible1 = true
      this.form.height = null
      this.form.width = null
      this.form.length = null
      this.size = 0
    },
    handIncrease(){
      this.$refs['ruleFormAdd'].validate(valid => {
        if (valid){
          let that = this
          that
            .$axios({
              method:'post',
              url:'/tsarea/add',
              data:{ ...this.increaseForm }
            })
            .then(() => {
              that.$message({
                showClose:true,
                message:that.$t('m.success'),
                type:'success',
                duration:1000
              })
              that.inCheckList = []
              that.dialogFormVisible1 = false
              that.init()
            })
        }
      })
    },
    editCancel(){
      this.dialogFormVisible = false
      this.init()
    },
    editState(){
      if (!this.tableRowSelected.length)
        return this.callbackMessage(
          this.$t('m.choose') + this.$t('m.page.temporary')
        )
      this.dialogFormVisible2 = true
    },
    handleState(){
      let ids = []
      for (let i = 0;i < this.tableRowSelected.length;i++){
        ids.push(this.tableRowSelected[i].tsareaid)
      }
      let state = this.stateValue
      let options = {
        method:'put',
        url:`/tsarea/state`,
        data:{ ids, state }
      }
      this.$axios(options).then(() => {
        this.callbackMessage(this.$t('m.state') + this.$t('m.editSuccess'))
        this.init()
        this.stateValue = ''
        this.dialogFormVisible2 = false
      })
    },
    selectState(val){
      this.formInline.state = val
    },
    getWarehouse(){
      let that = this
      that
        .$axios({
          method:'get',
          url:'/warehouse/list'
        })
        .then(({ data }) => {
          let all = data
          for (let i = 0;i < all.length;i++){
            that.warehouse.push({
              id:all[i].warehouseid,
              name:all[i].warehousename
            })
          }
          if (that.warehouse.length === 1){
            that.increaseForm.warehousename = that.warehouse[0].name
            that.increaseForm.warehouseid = that.warehouse[0].id
          }
        })
    },
    selectWarehouse(id){
      this.increaseForm.warehouseid = id
      this.increaseForm.warehousename = this.warehouse.filter(function (item){
        return item.id == id
      })[0].name
      this.form.warehouseid = id
      this.form.warehousename = this.warehouse.filter(function (item){
        return item.id == id
      })[0].name
    },
    setType(id){
      this.increaseForm.type = id
      this.form.type = id
    },

    getSize(){
      let tempsize = 0
      if (this.form.height && this.form.width && this.form.length){
        tempsize =
          Number(this.form.height) * 100 *
          Number(this.form.width) * 100 *
          Number(this.form.length) * 100 / 1000000 || 0
        this.size = tempsize.toFixed(2)
      }
    },
    getSize2(){
      let tempsize = 0
      if (
        this.increaseForm.height &&
        this.increaseForm.width &&
        this.increaseForm.length
      ){
        tempsize =
          Number(this.increaseForm.height) * 100 *
          Number(this.increaseForm.width) * 100 *
          Number(this.increaseForm.length) * 100 / 1000000
        this.size = tempsize.toFixed(2)
      }
    },
    closeDialog(){
      this.$refs['ruleFormEdit'].resetFields()
    },
    closeAddDialog(){
      this.$refs['ruleFormAdd'].resetFields()
    }
  },
  activated(){
    this.init(1, 10)
    this.getWarehouse()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    this.dialogFormVisible1=false
    this.dialogFormVisible2=false
    next()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
</style>
